<template>
	<div :class="['delegation-layout-content', isSysAdmin ? 'isSysAdmin' : '']">
		<div class="inventory-type-title">
			<div class="inventory-type-left">
				<div
					v-if="status == '0'"
					class="inventory-type-title-solid card_status-draft"
				></div>
				<div
					v-if="status == '3'"
					class="inventory-type-title-solid card_status-draft"
				></div>
				<div
					v-if="status == '1'"
					class="inventory-type-title-solid card_status-effect"
				></div>
				<div
					v-if="
						status == '2' && historyStatus === 'history_dataset_associations'
					"
					class="inventory-type-title-solid card_status-complete"
				></div>
				<div
					v-if="
						status == '2' && historyStatus !== 'history_dataset_associations'
					"
					class="inventory-type-title-solid card_status-effective"
				></div>
				<span class="inventory-type-title-type">{{
					$t('delegate.taskTitle', '委托任务类型')
				}}</span>
			</div>
			<span class="inventory-type-title-Tips">{{
				$t(
					'delegate.taskTitleTip',
					'若你的代理人授权他人审批其单据，你的审批任务不会被传递'
				)
			}}</span>
		</div>
		<div id="handelDocID">
			<a-spin :spinning="spinning">
				<a-empty v-if="setMandateData.length == 0" />
				<div class="gutter-example" v-for="item in setMandateData" :key="item">
					<div class="gutter-example-title">{{ item.type_name }}</div>
					<a-row :gutter="10">
						<a-col
							class="gutter-row"
							v-for="items in item.process_merge_bos"
							:key="items"
							:span="6"
						>
							<li class="ant-cols">
								<EllipsisTooltip
									:title="items.process_name"
									:style="{ maxWidth: 'calc(100%)' }"
								/>
							</li>
						</a-col>
					</a-row>
				</div>
			</a-spin>
		</div>
	</div>
</template>

<script lang="ts">
import EllipsisTooltip from '@/entry_desktop/components/EllipsisTooltip'
import { defineComponent, nextTick, onMounted, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
export default defineComponent({
	components: {
		EllipsisTooltip,
	},
	props: {
		setMandateData: {
			type: Array,
			default: () => [],
		},
		spinning: String,
		status: String,
	},

	setup(props) {
		const router = useRouter()
		const historyStatus: any = ref('')
		const variableName = router.currentRoute.value.name
		historyStatus.value = variableName
		const store = useStore()
		const isSysAdmin = store.state.userInfo.sys_admin

		const handeltop = () => {
			document.getElementById('handelDocID')!.scrollTop = 0
		}
		watch(
			() => props.setMandateData,
			() => {
				handeltop()
			}
		)
		//监听多个数据

		return {
			historyStatus,
			handeltop,
			isSysAdmin
		}
	},
})
</script>
>

<style lang="less" scoped>
.delegation-layout-content {
	width: calc(100% - 340px);
	height: calc(100vh - 150px);
	background: @rok-white-bg;
	padding: 24px 24px 24px 24px;
	border-radius: 8px;
	&.isSysAdmin {
		height: calc(100vh - 190px);
	}
}
.inventory-type-title {
	display: flex;
	flex-flow: column;
	margin-bottom: 26px;
	.inventory-type-left {
		display: flex;
		align-items: center;
	}
	.inventory-type-title-solid {
		width: 3px;
		height: 16px;
	}
	.card_status-draft {
		background: @rok-text-color-secondary;
	}
	.card_status-effect {
		background: @rok-primary-color;
	}
	.card_status-effective {
		background: @rok-warning-color;
	}
	.card_status-complete {
		background: @rok-success-color;
	}

	.inventory-type-title-type {
		font-weight: 600;
		font-size: 16px;
		padding: 0 8px;
		color: @rok-text-color;
	}
	.inventory-type-title-Tips {
		font-size: 14px;
		color: @rok-amount-bg;
		margin-top: 8px;
	}
}
#handelDocID {
	width: calc(100%);
	height: calc(100vh - 300px);
	overflow-x: hidden;
	overflow-y: auto;
	padding: 0 2px;
}
.gutter-example {
	.gutter-example-title {
		padding: 12px 0px 12px 16px;
		background: @rok-table-header-color;
		font-weight: 500;
		color: @rok-text-color;
		font-size: 15px;
		margin-bottom: 10px;
	}
	.ant-cols {
		display: block;
		height: 40px;
		background: @rok-white-color;
		border: 1px solid @rok-Divider-color;
		box-sizing: border-box;
		border-radius: 4px;
		line-height: 40px;
		margin-bottom: 10px;
		padding: 0 15px;
		font-size: 14px;
		color: @rok-text-color;
		cursor: default;
	}

	@media (min-width: 0px) and (max-width: 1440px) {
		.ant-col-6 {
			display: block;
			flex: 0 0 20%;
			max-width: 20%;
		}
	}

	@media (min-width: 1440px) and (max-width: 1920px) {
		.ant-col-6 {
			display: block;
			flex: 0 0 16.666666%;
			max-width: 16.666666%;
		}
	}
	@media screen and (min-width: 1920px) {
		.ant-col-6 {
			display: block;
			flex: 0 0 12.5%;
			max-width: 12.5%;
		}
	}
}</style
>>
